<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Dropkick.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A JavaScript plugin for creating beautiful, graceful, and painless custom dropdowns." />
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="dropkick.js"></script>
    <link rel="stylesheet" href="example.css">
    <link rel="stylesheet" href="dropkick.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="container">
      <a href="https://github.com/Robdel12/DropKick">
        <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png">
      </a>
      <h1>DropKick.js</h1>
      <h2>A JavaScript plugin for creating beautiful, accessible, and painless custom dropdowns.</h2>
      <h2><a href="/docs">Go to API docs</a></h2>
      <div class="example-container half">
        <h2>Regular Select</h2>
        <select id="normal_select">
          <option disabled selected class="hidden-option">Choose One</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="half gist-container">
        <div class="gist-wrapper">
          <script src="https://gist.github.com/Robdel12/cf44df11ea55892393a3.js"></script>
        </div>
        <a href="#" class="btn">Show Full Code</a>
      </div>
      <div class="example-container half">
        <h2>Disabled Select</h2>
        <select id="disabled" disabled>
          <option disabled selected class="hidden-option">Choose One</option>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="half gist-container">
        <h3>JavaScript:</h3>
        <div class="gist-wrapper">
          <script src="https://gist.github.com/Robdel12/4b45b0ae35fd2db11711.js"></script>
          <h3>Markup:</h3>
          <script src="https://gist.github.com/Robdel12/f23e47fb9b7423fa01df.js"></script>
        </div>
        <a href="#" class="btn">Show Full Code</a>
      </div>
      <div class="example-container half">
        <h2>Opt Group</h2>
        <select id="opt_group">
          <option disabled selected class="hidden-option">Choose One</option>
          <optgroup label="Group 1">
            <option>Option 1.1</option>
          </optgroup>
          <optgroup label="Group 2">
            <option>Option 2.1</option>
            <option>Option 2.2</option>
          </optgroup>
          <optgroup label="Group 3" disabled>
            <option>Option 3.1</option>
            <option>Option 3.2</option>
            <option>Option 3.3</option>
          </optgroup>
        </select>
      </div>
      <div class="half gist-container">
        <div class="gist-wrapper">
          <h3>JavaScript:</h3>
          <script src="https://gist.github.com/Robdel12/ee41e63e239118ce8f96.js"></script>
          <h3>Markup:</h3>
          <script src="https://gist.github.com/Robdel12/9149ca611e166899a141.js"></script>
        </div>
        <a href="#" class="btn">Show Full Code</a>
      </div>
      <div class="example-container half">
        <h2>Multi-select</h2>
        <select multiple id="multiple">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="DC">District Of Columbia</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="half gist-container">
        <div class="gist-wrapper">
          <h3>JavaScript:</h3>
          <script src="https://gist.github.com/Robdel12/74377d7faa5d745a12a3.js"></script>
          <h3>Markup:</h3>
          <script src="https://gist.github.com/Robdel12/cab58fc87e1eb6c174ef.js"></script>
        </div>
        <a href="#" class="btn">Show Full Code</a>
      </div>

      <script>
       $(function() {
         $( "#normal_select, #disabled, #opt_group, #multiple" ).dropkick({
           mobile: true
         });

         $(".gist-container").each(function(index, gist) {
           if (gist.offsetHeight > 160) {
             $(".btn", gist).css('display', 'inline-block').on('click', function() {
               var $gistWrapper = $(".gist-wrapper", gist);

               if($gistWrapper.css('maxHeight') == "100%"){
                 $gistWrapper.css('maxHeight', "");
                 $gistWrapper.css('overflow', "");
                 this.innerHTML = "Show Full Code";
                 return false;
               } else {
                 $gistWrapper.css('maxHeight', "100%");
                 $gistWrapper.css('overflow', "visible");
                 this.innerHTML = "Hide Code";
                 return false;
               }
             })
           }
         });

       });
      </script>
    </div>
  </body>
</html>
